<template>
	<view class="box">
		<view class="mt2x" v-for="(v,vIndex) in buy_option" :key="vIndex">
			<view class="option-title">
				{{v.name}}
			</view>
			<view class="options-group el-flex">
				<block v-for="(item,index) in v.list" :key="index">
					<template>
						<view class="option-item" @click="clickSpecs(v,item)"
							:class="{'option-act':item.selected,'disabled':item.disabled}">
							{{item.name}}
						</view>
					</template>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import getPowerSet from '@/common/js/bwPowerSet.js'
	export default {
		name: 'GoodsSku',
		props: {
			buy_option:{
				type: Array,
				default: []
			},
			goodsData:{
				type: Array,
				default: []
			},
			skuId: {
				type: [String,Number],
				default: ''
			}
		},
		data() {
			return {
				pathMap: {}
			}
		},
		methods: {
			// 根据id 还原选中规格
			initSelectedStatus(goodsData, skuId) {
				let dist = {}
				this.buy_option.map(item => {
					item.list.map(child => {
						dist[child.prop_value_id] = child.name
					})
				})
				// 1. 找到选中的具体的规格  sku对象
				const sku = goodsData.find(sku => sku.goods_id == skuId)
				if (sku) {
					const selectArr = sku.prop_list.map(spec => dist[spec.prop_value_id]) //  ["黑色", "中国", "10cm"]
					this.buy_option.forEach((spec, idx) => {
						spec.list.forEach(value => {
							// 给每一项都给当前的状态给value.selected
							value.selected = (value.name === selectArr[idx])
						})
					})
					this.tryEmit()
				}
			},
			tryEmit() {
				const spliter = '*'
				// 触发change事件将sku数据传递出去
				const selectedArr = this.getSelectedArr(this.buy_option).filter(v => v)
				// 当选中的length 和 一共的lengs相等就调用下面 否则传空对象过去
				if (selectedArr.length === this.buy_option.length) {
					const skuIds = this.pathMap[selectedArr.join(spliter)]
					const sku = this.goodsData.find(sku => sku.goods_id === skuIds[0])
					// 传递
					this.$emit('getSelect', {id:sku.goods_id,selectedArr:selectedArr})
				} else {
					// emit('change', {})
				}
			},
			// 当前选中规格集合  [undefined, "中国", undefined]
			getSelectedArr(specs) {
				return specs.map((spec) => {
					const selectedVal = spec.list.find((val) => val.selected)
					// 找到了要里面的name 没有要 undefined
					return selectedVal ? selectedVal.name : undefined
				})
			},
			// 更新按钮的禁用状态
			updateDisabledStatus(pathMap, specs) {
				const spliter = '*'
				// 1. 当前用户的选择状态[undefined, "中国", undefined]
				const _selectedArr = this.getSelectedArr(specs)
				specs.forEach((spec, i) => {
					const selectedArr = [..._selectedArr]
					//   对每一个按钮
					spec.list.forEach((val) => {
						// 2. 已经选中的按钮不需要判断
						if (val.selected) return false
						// 3. 假设他能选，更新选中之后的条件
						selectedArr[i] = val.name
						// 4.过滤掉undefined得到key
						const key = selectedArr.filter(v => v).join(spliter)
						// 当前的状态 = 去路径字典里里找name 如果找到了就为说明存在true 取个反
						val.disabled = !pathMap[key]
					})
				})
			},
			getPathMap(skus) {
				// 用来保存的路径字典
				let dist = {}
				this.buy_option.map(item => {
					item.list.map(child => {
						dist[child.prop_value_id] = child.name
					})
				})
				const spliter = '*'
				const pathMap = {}
				//   遍历每一个sku规格
				skus.forEach(sku => {
					// 2. 拼接起来得到属性值数组例如 ['黑色','中国','10cm']
					const specs = sku.prop_list.map(spec => dist[spec.prop_value_id])
					// 3.得到sku的子集 [[] ["蓝色"] ["中国"]["蓝色", "中国"] ["10cm"]...]
					const powerSet = getPowerSet(specs)
					// 将子集循环
					powerSet.forEach(set => {
						const key = set.join(spliter)
						if (pathMap[key]) {
							// 已经有key往数组追加
							pathMap[key].push(sku.goods_id)
						} else {
							// 没有key设置一个数组
							pathMap[key] = [sku.goods_id]
						}
					})

				})
				return pathMap
			},
			clickSpecs(item, val) {
				if (val.disabled) return false
				// 如果当前选中
				if (val.selected) {
					// 就把当前取消选中
					// val.selected = false
				} else {
					//  否则把每一项都取消选中
					item.list.forEach(item => {
						item.selected = false
					})
					// 把自己选中
					val.selected = true
				}
				this.updateDisabledStatus(this.pathMap, this.buy_option)
				this.tryEmit()
			}
		},
		mounted() {
			this.pathMap = this.getPathMap(this.goodsData)
			this.initSelectedStatus(this.goodsData, this.skuId)
			this.updateDisabledStatus(this.pathMap, this.buy_option)
		}
	}
</script>
<style scoped lang="scss">
	.disabled {
		opacity: 0.6;
		border-style: dashed;
		cursor: not-allowed;
	}

	.mt2x {
		padding-bottom: .2rem;

		.option-title {
			display: flex;
			position: relative;
			margin-bottom: .2rem;
			font-size: .24rem;
			color: #000;
			font-weight: 700;
		}

		.options-group {
			justify-content: flex-start;
			flex-wrap: wrap;



			.option-item {
				font-size: .2rem;
				line-height: .24rem;
				min-width: 0.64rem;
				box-sizing: border-box;
				height: 0.54rem;
				padding: 0.14rem 0.2rem;
				text-align: center;
				margin: 0 0.24rem 0.24rem 0;
				overflow: visible;
				border-radius: 0.28rem;
				border: 0.02rem solid transparent;
				background: rgba(0, 0, 0, .04);

			}

			.option-act {
				color: #f56600;
				border: 0.02rem solid #ff5934;
				border-radius: 0.28rem;
				background: rgba(255, 89, 52, .08);
			}
		}
	}
</style>